<div class="page">
    <h1>单行文本输入框 Input</h1>
    <div class="line"></div>
    <br>

    <div id="inputBox"></div>
    <br>
    <p>
        <button type="button" type="button" class="layui-btn layui-btn-normal" id="getEvent">get 取值方法</button>
        <button type="button" type="button" class="layui-btn layui-btn-normal" id="setEvent">set 赋值方法</button>
        <span style="padding:0 0 20px 0">验证方法为 ：notNull (不为空)</span>
    </p>
    <br>
    <p>
        <button type="button" type="button" class="layui-btn layui-btn-normal" id="readonly">readonly 设置为只读状态</button>
        <button type="button" type="button" class="layui-btn layui-btn-normal" id="unReadonly">unReadonly 取消只读状态</button>
    </p>
    <br>
    <p>
        <button type="button" type="button" class="layui-btn layui-btn-normal" id="showErrorStyle">showErrorStyle 显示错误状态</button>
        <button type="button" type="button" class="layui-btn layui-btn-normal" id="hideErrorStyle">hideErrorStyle 清除错误状态</button>
    </p>
    <br>

    <pre class="line-numbers"><code class="language-js">// 创建 Input
var inputDemo = new icu.formElement.input({
    size: 'normal', // 自定义Class属性
    verify: {  // rules 对象 参照多规则验证集合文档 中的说明进行设置
        text: '测试输入框',
        rules: 'notNull'
    },
    inputType: 'text', // 可选值 text （文本输入框） password （密码提示框）
    readonly: false,  // 设置是否只读
    placeholder: '测试input内容', // 设置未填写输入框时的提示语句
    'default': null, // 默认值
    autocomplete: 'off', // 自定填写开关 'on/off'
    errorStyle: 'form-error', // 自定义表单元素出现错误时的外层样式
    onChange: function (value) {  // 当输入框发生改变时的回调方法
        // value 为改变后的值
        // this 指向当前 Input 对象
    },
    onError: function (errorMessage,value) { // 当输入框输入的值未通过验证时的回调方法
        // errorMessage 为提示的错误信息
        // value 为改变后的值
        // this 指向当前 Input 对象
    },
});

// 渲染
$('body').append(inputDemo.html);

// 取值方法
inputDemo.get(function(errorMessage,value){
    // errorMessage 为提示的错误信息
    // value 为改变后的值
    if (errorMessage) {
        icu.alert.error({
            text: errorMessage
        });
    } else {
        icu.alert.normal({
            text: value
        });
    }
});

// 赋值方法
inputDemo.set('String');

// 可异步绑定的change方法
// 绑定后会替换初始对象中的 onChange 方法
inputDemo.onChange(function(value){
    // value 为改变后的值
    // this 指向当前 Input 对象
});

// 显示单行文本错误样式
inputDemo.showErrorStyle();

// 隐藏单行文本错误样式
inputDemo.hideErrorStyle();

// 设置只读状态
inputDemo.readonly(true); // 设置为只读状态
inputDemo.readonly(false); // 取消只读状态
</code></pre>


</div>